<template>
	<view  v-if="discount" class="discount-box">
		<view class="discount-title">
			<text class="title-img" ></text>
			<uni-count-down 
					class="discount-time"
					:day="day"
					:hour="hourse"
					:minute="minute"
					:second="second"
					 background-color="#565656"
					 color="#fff"
			></uni-count-down>
			<text class="iconfont iconright"  @click="entryDiscountList()" >查看更多</text>
		</view>
		<view class="discount-goods">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-y="false" @scroll="scroll" scroll-left="0">
				<block v-for="(item, index) in discount.goods_list" :key="index">
					<view  class="scroll-view-item_H" @click="entryDiscountGoodsDetail(item.goods_id)">
						<view class="img-box">
							<image class="goods-img" :src="$util.img(item.pic_cover_small)"  mode="aspectFit"></image>
						</view>							
						<text class="goods-name">{{ item.goods_name }}</text>					
						<view class="goods-price">
							<text class="discount-price">￥{{ item.promotion_price }}</text>
							<text class="discount-price">￥{{ item.price }}</text>
						</view>
					</view>							
				</block>								
			</scroll-view>
		</view>
	</view>
</template>
<script>
import http from 'common/js/http.js';
import uniCountdown from '@/components/uni-count-down/uni-count-down.vue';
export default{
	name: 'diy-discount',
	components: {
		uniCountdown
	},
	mixins: [http],
	props: {
		value: {
		}
	},
	data(){
		return {
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			discount : [],
			day: 0,
			hourse: 0,
			minute: 0,
			second: 0,
			currentTime: 0
		}
	},
	
	async onLoad() {
		await this.getCurrentTime();
	},
	
	created() {
		this.getDiscountList();
	},
	methods:{
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		
		async getCurrentTime() {
			let res = await this.sendRequest({
				url: 'System.Goods.getCurrentTime',
				async: false
			});
			this.currentTime = res.data / 1000;
		},
		
		getDiscountList (){
			 this.sendRequest({
			 	url: 'System.Goods.newestDiscount',
			 	data: {},
			 	success: res => {
			 		//101
			 		let data = res.data;
			 		if (data != null) {
			 			this.discount = data;	
						this.day = Math.floor((this.discount.end_time - 1586834232) / 24 / 60 / 60);
						this.hourse = Math.floor(((this.discount.end_time - 1586834232) % (24 * 60 * 60)) / (60 * 60));
						this.minute = Math.floor((((this.discount.end_time - 1586834232) % (24 * 60 * 60)) % (60 * 60)) / 60);
						this.second = (((this.discount.end_time - 1586834232) % (24 * 60 * 60)) % (60 * 60)) % 60;
			 		} 
			 	}
			 });
		},
		
		entryDiscountList (){
			this.$util.redirectTo('/pages/goods/discount/discount');
		},
		
		entryDiscountGoodsDetail (goodsId){
			this.$util.redirectTo('/pages/goods/detail/detail', { goods_id: goodsId });
		}
	}
}
</script>

<style lang="scss">
.discount-box{
	background: #FFFFFF;
	overflow:hidden;
	position: relative;
	.discount-title{
		line-height: 1;
		padding: 20rpx;
		position: relative;
		.discount-time{
			position: absolute;
			top: 17rpx;
			.uni-countdown__number{
				height:35rpx;
				line-height: 36rpx;
				padding:0rpx 5rpx;
			}
		}		
		.title-img{
			width: 160rpx;
			height: 35rpx;
			display: inline-block;
			margin-right: 20rpx;
			background: url() center no-repeat;
			background-size: 100% 100%;
		};	
		.iconfont{
			position: absolute;
			right: 20rpx;
			font-size: 24rpx;
			padding-right: 28rpx;
			color: #ff0036;
			line-height: 35rpx;
		};
		.iconfont:before {
		position: absolute;
		right: 0px;		
		}
	};
	.discount-goods{
		
		padding:0rpx 20rpx;
		.scroll-view_H{
			white-space: nowrap;
			width: 100%;
			.scroll-view-item_H{
				position: relative;
				width: 30vw;
				margin-right: 20rpx;
				display: inline-block;
				.img-box{
					border: 1rpx solid #ebebeb;
					line-height: 1;
					background-color: #f8f8f8;
					padding: 1rpx;
					.goods-img{
						width:100%;
						height:30vw;
						border-radius: 6px;
						overflow: hidden;
					}
				};
				.goods-name{
					display: block;
					font-weight: bold;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					font-size:24rpx;
					margin-top: 8rpx;
				};
				.goods-price{					
					width: 100%;
					text:nth-child(1){
						color: #FF0036;
						display: block;
						font-size: 26rpx;
					}
					text:nth-child(2){
						color: #898989;
						display: block;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				};
			}
		}
	}
}
</style>
